<!--
 * @Description: 任务监测
 * @Author: Caroline
* @Date: 2024-03-07 19:03:02
 * @LastEditTime: 2024-03-13 22:14:46
 * @LastEditors: Caroline
 * @FilePath: \Evaluation-web\src\views\task\detail\monitor\index.vue
-->

<template class="common-footerFixed-box">
  <div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="onTabClick">
      <el-tab-pane label="点位监测" name="point">
        <!-- 1、搜索区 -->
        <el-form :inline="true" :model="dataForm" @keyup.enter="getData">
          <!-- 测评人员 -->
          <el-form-item>
            <el-select v-model="dataForm.evaluator" clearable placeholder="测评人员">
              <el-option v-for="item in evaluatorList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>

          <!-- 点位名称 -->
          <el-form-item>
            <el-input v-model="dataForm.pointName" placeholder="点位名称" clearable></el-input>
          </el-form-item>

          <!-- 时间 -->
          <el-form-item>
            <el-date-picker ref="datesRef" type="dates" v-model="dataForm.evaluateTimeList" :editable="false" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="时间"></el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="getData">{{ $t("query") }}</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="getData">{{ $t("reset") }}</el-button>
          </el-form-item>
        </el-form>

        <!-- 内容区 -->
        <div class="content point-monitor-wrap">
          <div class="person-item" v-for="(personItem, i) in personnelList" :key="i">
            <div class="title">测评人员：{{ personItem.userName }}</div>

            <div class="point-item" v-for="pointItem in personItem.points" :key="pointItem.id">
              <el-row class="point-item-info" :gutter="16">
                <el-col :span="8">
                  <span class="point-item-label">点位名称：</span>
                  <span class="point-item-value">{{ pointItem.point.naturalVillageName }}</span>
                </el-col>
                <el-col :span="9">
                  <span class="point-item-label">区域：</span>
                  <span class="point-item-value">{{ pointItem.point.cityName }}/{{ pointItem.point.areaName }}/{{ pointItem.point.streetName }}/{{ pointItem.point.adminVillageName }}</span>
                </el-col>
                <el-col :span="5">
                  <span class="point-item-label">时间：</span>
                  <span class="point-item-value">{{ formatDate(pointItem.updateDate) }}</span>
                </el-col>
                <el-col :span="2">
                  <!-- 测评状态 0-未测评 1-不通过  2- 已测评 3-通过 -->
                  <el-tag type="danger" v-if="pointItem.status === 1">已驳回</el-tag>
                  <el-button type="warning" v-if="pointItem.status === 2" plain @click="onRejectShow(pointItem)">驳回</el-button>
                </el-col>
              </el-row>

              <div class="point-item-imgs">
                <div class="img-label">现场照片：</div>
                <el-row class="img-list" :gutter="16">
                  <el-col :span="3" :key="imgIndex" v-for="(imgItem, imgIndex) in pointItem.imgs?.split(',')">
                    <img :src="imgItem" />
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="路线监测" name="route">
        <div class="content point-monitor-wrap">
          <div class="title">测评人员：张三</div>
          <div class="point-item">
            <div class="point-item-imgs">
              <div class="img-label">路线图：</div>
              <el-row class="img-list">
                <el-col :span="24">
                  <img
                    src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics3.baidu.com%2Ffeed%2Fadaf2edda3cc7cd96fcfeef5c7e98b32b90e9137.jpeg%40f_auto%3Ftoken%3Dd47621830adb9f98fd2964a4feaae533&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1709917200&t=2c610143e8b8befc5565ba65931db939"
                    alt=""
                  />
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="common-footer" :class="{ collapseSidebar: store.state.collapseSidebar }">
      <el-button type="info" size="large" plain @click="onBack">返回</el-button>
      <el-button type="primary" size="large" :disabled="passBtnDisabled" @click="onMonitorConfirm">监测通过</el-button>
    </div>

    <el-dialog v-model="isReasonDialogShow" title="驳回">
      <el-form :form="reasonForm">
        <el-form-item label="驳回理由" :rules="[{ required: true, message: '请输入驳回理由', trigger: ['blur', 'change'] }]">
          <el-input type="textarea" v-model="reasonForm.reason" :autosize="{ minRows: 4, maxRows: 8 }" />
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <el-button @click="isReasonDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="onReject">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useAppStore } from "@/store";
import baseService from "@/service/baseService";
import { formatDate } from "@/utils/date";
import { ElMessage } from "element-plus";

const router = useRouter();
const store = useAppStore();
const route = useRoute();

const activeName = ref("point");
const onTabClick = (val: string) => {
  console.log(val);
};

const isReasonDialogShow = ref(false);
const reasonForm = ref<any>({
  reason: ""
});
const currentPoint = ref<any>({});
const onRejectShow = (pointItem: any) => {
  reasonForm.value.reason = "";
  currentPoint.value = pointItem;
  isReasonDialogShow.value = true;
};
// 驳回
const onReject = () => {
  baseService
    .put("/assess/assesstaskissuepoint", {
      id: currentPoint.value.id,
      status: 1
    })
    .then((res) => {
      if (res.code === 0) {
        ElMessage.success({
          message: "操作成功",
          duration: 500
        });
        isReasonDialogShow.value = false;
        getData();
      }
    });
};

type FormDataType = {
  pointName: string;
  evaluator: { id: string; name: string };
  evaluateTimeList: string[];
};
const dataForm = ref<FormDataType>({
  pointName: "",
  evaluator: { id: "", name: "" },
  evaluateTimeList: []
});

// 测评人员集合
const evaluatorList = ref<{ id: string; name: string }[]>([]);
const getEvaluatorList = () => {
  baseService.get("/assess/user/list").then((res) => {
    evaluatorList.value = res.data.map((item: { id: string; realName: string }) => {
      return { id: item.id, name: item.realName };
    });
  });
};
getEvaluatorList();

// 获取数据
const personnelList = ref<any[]>([]);
const passBtnDisabled = computed(() => {
  let disabled = false;
  personnelList.value.forEach((person: any) => {
    person.points.forEach((point: any) => {
      if (point.status !== 2) {
        disabled = true;
      }
    });
  });
  return disabled;
});
const getData = () => {
  const { pointName, evaluator, evaluateTimeList } = dataForm.value;
  const params = {
    taskId: route.query.taskId,
    dateTime: evaluateTimeList.join(""),
    naturalVillageName: pointName,
    userId: evaluator?.id || ""
  };
  baseService.get("/assess/assesstaskissue/point/monitor", params).then((res) => {
    personnelList.value = res.data || [];
  });
};
getData();

const onBack = () => {
  router.go(-1);
};

const onMonitorConfirm = () => {
  baseService
    .put("/assess/assesstask", {
      id: route.query.taskId,
      status: 2
    })
    .then((res) => {
      ElMessage.success({
        message: "操作成功",
        duration: 500
      });
      getData();
    });
};
</script>

<style lang="scss" scoped>
.content {
  .title {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .point-item {
    font-size: 14px;
    margin-top: 16px;
    .point-item-info {
      margin-top: 20px;
      .el-col {
        display: flex;
        align-items: flex-start;
        margin-bottom: 12px;
        .point-item-label {
          color: #000000d9;
        }
        .point-item-value {
          line-height: 20px;
          color: #000000a6;
        }
      }
    }
    .point-item-imgs {
      display: flex;
      margin-top: 16px;
      .img-list {
        flex: 1;
      }
      img {
        width: 100%;
        margin-bottom: 12px;
      }
    }
  }
}
</style>
